(function () {
  //点击里面的小a,让对应的显示
  $(".monitor .tabs").on("click", "a", function () {
    //让当前的小a显示高亮,且让里面对应的内容显示
    //  console.log($(this).index())
    $(this).addClass("active").siblings("a").removeClass()
    $(".monitor .content").eq($(this).index()).show().siblings(".content").hide()
  })
  //通过遍历给一个克隆事件
  $(".marquee-view .marquee").each(function () {
    var rows = $(this).children().clone()
    //把克隆的元素给.marquee
    $(this).append(rows)
  })
})();
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号,这里的%相当于这个盒子的宽度
        radius: ["10%", "70%"],
        // 水平居中,垂直居中
        center: ["50%", "50%"],
        // 显示为面积模式 
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  });
})();
(function () {
  // 设置一个变量
  var item = {
    name: '',
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: '#254065'
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: '#254065'
      }
    },
    tooltip: {
      extraCssText: 'opacity:0'
    },
  }
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar"));
  // 2. 指定配置和数据
  var option = {
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0, 0, 0, 1,
      [
           { offset: 0, color: '#00fffb' }, // 0 起始颜色
           { offset: 1, color: '#0061ce' }  // 1 结束颜色
     ]
  ),
      // 工具提示
      tooltip: {
        // 触发类型  经过轴触发axis  经过轴触发item
        trigger: 'item',
        // 轴触发提示才有效
      
      },
      // 图表边界控制
      grid: {
        // 距离 上右下左 的距离
        left: '0%',
        right: '3%',
        bottom: '3%',
        top:'3%',
        // 是否包含文本
        containLabel: true,
        show: true,
        borderColor:'rgba(0,240, 255, 0.3)'
      },
      // 控制x轴
      xAxis: [
        {
          // 使用类目，必须有data属性
          type: 'category',
          // 使用 data 中的数据设为刻度文字
          data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
          // 刻度设置
          axisTick: {
            
            alignWithLabel: false,
            show: false,  
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          axisLine: {
            lineStyle: {
              color:'rgba(0, 240, 255, 0.3)'
            }
          },
        }
      ],
      // 控制y轴
      yAxis: [
        {
          // 使用数据的值设为刻度文字
          type: 'value',
          axisTick: {
            
            alignWithLabel: false,
            show: false,  
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          axisLine: {
            lineStyle: {
              color:'rgba(0, 240, 255, 0.3)'
            }
          },
          // y轴里面的分割线
          splitLine: {
            lineStyle: {
                // 使用深浅的间隔色
                color:'rgba(0, 240, 255, 0.3)', 
            }
        }
        }
      ],
      // 控制x轴
      series: [
        {
          // 图表数据名称
          name: '用户统计',
          // 图表类型
          type: 'bar',
          // 柱子宽度
          barWidth: '60%',
          // 数据
          data: [2100, 1900, 1700, 1560, 1400,
           item,
            item, item, 900, 750, 600, 480, 240],
        }
      ]
    };
      
    // 3. 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  });
})();
  
(function () {
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
  var myChart = echarts.init(document.querySelector(".line"));
  option = {
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      right: "10%",
      textStyle: {
        color: '#4c9bfd',
      },
      // data: ['预期销售额', '实际销售额']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: "20%",
      containLabel: true,
      show: true,
      borderColor: '#012f4a',
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      // 去除刻度线
      axisTick: {
        show: false
      },
      // 更换文字颜色
      axisLabel: {
        color: "#4c9bfd"
      },
      // 去除x轴,最下面的线
      axisLine: {
        show: false
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      // 更换文字颜色
      axisLabel: {
        color: "#4c9bfd"
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },
   
   
    series: [
      {
        name: '预期销售额',
        type: 'line',
        stack: '总量',
        data: data.year[0],
        type: 'line',
        // 折线修饰为圆滑
        smooth: true,
      },
      {
        name: '实际销售额',
        type: 'line',
        stack: '总量',
        data: data.year[1],
         
        smooth: true,
      },
        
    ]
  };
  myChart.setOption(option)

  // 排他思想
  $(".sales .caption").on("click", "a", function () {
    index = $(this).index() - 1
    $(this).addClass("active").siblings("a").removeClass("active")
    // 给一个索引,让其点击之后,跟着动
    
    var arr = data[this.dataset.type]
    option.series[0].data = arr[0]
    option.series[1].data = arr[1]
    myChart.setOption(option)
  })

  // 首先获取a
  var as = $(".sales .caption a")
  var index = 0;
  //然后通过定时器,让里面的东西隔一秒就动
  var timer = setInterval(function () {
    //可以设置一个变量
    index++;
    // 这里定义一个条件,如果>=4,则让index重新等于0
    // 新写法
    if (index >= 4) index = 0;
   
    as.eq(index).click()
  }, 1000)
  
  // 设置一个事件,鼠标一上去,停止,离开重新动
  $(".sales").hover(function () {
    // 鼠标移上去,事件不动
    clearInterval(timer)

  }, function () {
    clearInterval(timer)
    timer = setInterval(function () {
      //可以设置一个变量
      index++;
      // 这里定义一个条件,如果>=4,则让index重新等于0
      // 新写法
      if (index >= 4) index = 0;
     
      as.eq(index).click()
    }, 1000)
  })

})();

(function () {
  
  // 首先,我们通过定时器,让里面的数据动起来,其次,对应的订单量和销售额需要改变
  // 点击的是要有对应的变化
  // 以及鼠标移上不动,离开就动起来

  // 首先要定义一个对象,把订单量,销售额放在里面
  var data = {
    day365: { a: '20301987', b: '99834' },
    day90: { a: '203019', b: '11998' },
    day30: { a: '20301', b: '9922' },
    day24: { a: '2030', b: '1234' }
  }
  //要把里面的值,给对应的两个h4
  var ha = $(".order h4:eq(0)")
  var haa = $(".order h4:eq(1)")
  $(".order").on("click", ".filter a", function () {
    index = $(this).index()
    // 显示当前高亮
    $(this).addClass("active").siblings("a").removeClass("active");
    // 获取里面自定义的值
    var currdata = data[this.dataset.key]
    // 点击的时候,把值给对应的数据
    ha.html(currdata.a)
    haa.html(currdata.b)
  })

  // 首先获取a
  var as = $(".order .filter a")
  console.log(as)
  // 定义一个变量,每次动累加1
  var index = 0;
  // 通过定时器让a动起来
  var timer = setInterval(function () {
    index++;
    if (index >= 4) index = 0
    as.eq(index).click()
  }, 1000);
  // 鼠标移入移出效果
  $(".order").hover(function () {
    // 清除定时
    clearInterval(timer)
  }, function () {
    clearInterval(timer)
    timer = setInterval(function () {
      index++;
      if (index >= 4) index = 0
      as.eq(index).click()
    }, 1000);
  })
})();
// 雷达图
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置

  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"]
    },
    radar: {
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 }
      ],
      // 修改雷达图的大小
      radius: "45%",
      shape: "circle",
      // 分割的圆圈个数
      splitNumber: 4,
      name: {
        // 修饰雷达图文字的颜色
        textStyle: {
          color: "#4c9bfd"
        }
      },
      // 分割的圆圈线条的样式
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255, 0.5)"
        }
      },
      splitArea: {
        show: false
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)"
        }
      }
    },
    series: [
      {
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5
          }
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记 （拐点）
        symbol: "circle",
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
          color: "#fff"
        },
        // 让小圆点显示数据
        label: {
          show: true,
          fontSize: 10
        },
        // 修饰我们区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)"
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
    series: [
      {
        name: "销售进度",
        type: "pie",
        radius: ["130%", "150%"],
        // 移动下位置  套住50%文字
        center: ["48%", "80%"],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
          normal: {
            show: false
          }
        },
        //饼图的起始角度,180,
        startAngle: 180,
        // 鼠标经过不需要放大图片偏移
        hoverOffset: 0,
        data: [
          {
            value: 100,
            itemStyle: {
              // 让颜色渐变
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" } // 1 结束颜色
                ]
              )
            }
          },
          {
            value: 100,
            itemStyle: {
              color: "#12274d"
            }
          },
          {
            value: 200,
            itemStyle: {
              color: "transparent"
            }
          }
        ]
      }
    ]
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
(function () {
  var hotData = [
    {
      city: '北京',  // 城市
      sales: '25, 179',  // 销售额
      flag: true, //  上升还是下降
      brands: [   //  品牌种类数据
        { name: '可爱多', num: '9,086', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true },
      ]
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false },
      ]
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true },
      ]
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false },
      ]
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true },
      ]
    }
  ]
  
//  我们通过遍历的方式赋值,因为是数组,所以我们用$.each
  var kong = ''
  $.each(hotData, function (i,ele) {
    //设置一个空的变量,然后累加
    kong+=`<li>
    <span>${ele.city}</span>
    <span>${ele.sales}<s class=${ele.flag? "icon-up":"icon-down"}></s></span>
  </li>`
  })
  // 把值给sup
  $(".sup").html(kong)
  function rander(tat) {
    // 注意,函数里面没有$(this)
    tat.addClass("active").siblings().removeClass()
    var kong1 = '';
    // 同时要让当前的brands显示出来,通过$.each遍历
    $.each(hotData[tat.index()].brands, function (i,ele) {
      // 设置一个变量,累加获取值
      kong1+=`<li><span>${ele.name}</span><span>${ele.num}<s class=${ele.flag ? "icon-up":"icon-down"}></s></span></li>`
    })
    // 把值给sup
    $(".sub").html(kong1)
  }

// 鼠标移到当前位置,显示高亮
  $(".province .sup").on("mouseenter", "li", function () {
    index = $(this).index()
  // 我们可以封装一个函数
    rander($(this))
 
  })
  var lis = $(".province .sup li")
  lis.eq(0).mouseenter()
    // 设置一个定时器,
    var index = 0;
  var timer=  setInterval(function () {
      index++;
      if(index>=5) index=0
    //lis.eq(index).mouseenter()
    rander(lis.eq(index))

    }, 2000)
  
  // 设置鼠标移入移出
  $(".province .sup").hover(function () {
    // 停止定时器
    clearInterval(timer)
  }, function () {
    clearInterval(timer)
    timer=  setInterval(function () {
      index++;
      if(index>=5) index=0
    //lis.eq(index).mouseenter()
    rander(lis.eq(index))
    }, 2000)
  })
 
})();



 
 